<template>
  <el-select :value="goodsIdList"
             multiple
             visible-change="visibleChange"
             style="width:100%"
             :disabled="disabled"
             placeholder="请选择商品"
             @change="goodsChange">
    <el-option v-for="item in optionsGoods"
               :key="item.id"
               :label="item.tasteNameValue"
               :value="item.id">
    </el-option>
    <div class="flex-between padding-10">
      <!-- <el-radio-group v-model="type"
                      @change="getGoodsList">
        <el-radio :label="1">烟杆</el-radio>
        <el-radio :label="2">烟弹</el-radio>
      </el-radio-group> -->
      <el-pagination small
                     layout="prev, pager, next"
                     @current-change="pageChange"
                     :total="total">
      </el-pagination>
    </div>

  </el-select>
</template>

<script>
import { queryGoodsList } from '../../services/goods'

export default {
  name: "product-input",
  props: {
    goodsIdList: {
      type: Array,
      required: true
    },
    disabled: {
      type: Boolean,
      required: true
    },
    productId: {
      type: String,
      required: true
    }
  },
  watch: {
    productId () {
      this.getGoodsList()
    }
  },
  data () {
    return {
      optionsGoods: [],
      cuurent: 1,
      size: 6,
      total: 0,
      // type: 1
    }
  },
  methods: {
    // 产品切换
    goodsChange (val) {
      // 产品切换对应的商品清空
      this.$emit('goodsChange', val)
    },
    // 获取产品列表
    async getGoodsList () {
      const data = {
        current: this.cuurent,
        size: this.size,
        productId: this.productId
        // type: this.type
      }
      try {
        const res = await queryGoodsList(data)
        if (res.code == 0) {
          this.optionsGoods = res.data.records
          this.total = res.data.total
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 分页
    pageChange (page) {
      this.cuurent = page
      this.getGoodsList()
    },
    // 显示隐藏
    visibleChange (flag) {
      if (!flag) {
        // this.type = 1
        this.cuurent = 1
        this.pageChange(1)
      }
    }
  },
  created () {
    // this.pageChange(1)
  }
}
</script>

<style>
</style>